<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta http-equiv="Access-Control-Allow-Origin" content="localhost">

  <script src="./js-source/echarts.js"></script>
  <script src="./js-source/jquery.js"></script>

  <script src="http://api.map.baidu.com/api?v=2.0&ak=gdpDWwteEoHd3TGeAAgHszakNPpjpTGU"></script>
  <script src="./js-source/bmap.min.js"></script>


  <link href="./firstPage-css/default.css" rel="stylesheet" type="text/css">
  <link href="./firstPage-css/home_min.css" rel="stylesheet" type="text/css">
  <link href="./firstPage-css/tian_min.css" rel="stylesheet" type="text/css">


  <title>总览图</title>
</head>

<body>

  <div class="map" id="earthView"> </div>
  <script type="text/javascript">
    var raw_data = [];
    var myChart = echarts.init(document.getElementById('earthView'));


    var getting = {
      url: 'http://localhost:3000/',
      type: 'get',
      success: function (globleData) {
        raw_data = globleData
        prag()
      }
    }


    var convertData1 = function () {
      var res = [];

      for (var i = 0; i < raw_data.result4.length; i++) {
        var geoCoord = [raw_data.result4[i].long, raw_data.result4[i].lat];
        res.push({
          name: raw_data.result4[i].name + raw_data.result4[i].sub_num,
          // value: [raw_data[i].long, raw_data[i].lat, 50] /* 在geoCoord数组后面再添加数组 */
          value: geoCoord.concat(100),
          /* 在geoCoord数组后面再添加数组 */
          tilt: raw_data.result4[i].tilt,
          tem: raw_data.result4[i].tem,
          message: raw_data.result4[i].message
        })
      }
      return res;
    };

    var convertData2 = function () {
      var res = [];

      for (var i = 0; i < raw_data.result1.length; i++) {
        var geoCoord = [raw_data.result1[i].long, raw_data.result1[i].lat];
        res.push({
          name: raw_data.result1[i].name + raw_data.result1[i].sub_num,
          // value: [raw_data[i].long, raw_data[i].lat, 50] /* 在geoCoord数组后面再添加数组 */
          value: geoCoord.concat(100),
          /* 在geoCoord数组后面再添加数组 */
          tilt: raw_data.result1[i].tilt,
          tem: raw_data.result1[i].tem,
          message: raw_data.result1[i].message
        })
      }
      for (var i = 0; i < raw_data.result2.length; i++) {
        var geoCoord = [raw_data.result2[i].long, raw_data.result2[i].lat];
        res.push({
          name: raw_data.result2[i].name + raw_data.result2[i].sub_num,
          // value: [raw_data[i].long, raw_data[i].lat, 50] /* 在geoCoord数组后面再添加数组 */
          value: geoCoord.concat(100),
          /* 在geoCoord数组后面再添加数组 */
          tilt: raw_data.result2[i].tilt,
          tem: raw_data.result2[i].tem,
          message: raw_data.result2[i].message
        })
      }

      for (var i = 0; i < raw_data.result3.length; i++) {
        var geoCoord = [raw_data.result3[i].long, raw_data.result3[i].lat];
        res.push({
          name: raw_data.result3[i].name + raw_data.result3[i].sub_num,
          // value: [raw_data[i].long, raw_data[i].lat, 50] /* 在geoCoord数组后面再添加数组 */
          value: geoCoord.concat(100),
          /* 在geoCoord数组后面再添加数组 */
          tilt: raw_data.result3[i].tilt,
          tem: raw_data.result3[i].tem,
          message: raw_data.result3[i].message
        })
      }

      return res;
    };




    function getFormatter(params) {
      return "温度：" + params.data.tem + "<br/>" + "倾斜角度:" + params.data.tilt + "<br/>" + params.data.message;
    }

    function renderItem(params, api) {
      var coords = [ /* 设置所有区域褐色覆盖面积 */
        [116.7, 39.53],
        [103.73, 36.03],
        [112.91, 27.87],
        [120.65, 28.01],
        [119.57, 39.95]
      ];
      var points = [];
      for (var i = 0; i < coords.length; i++) {
        points.push(api.coord(coords[i]));
      }
      var color = api.visual('color');

      return {
        type: 'polygon',
        shape: {
          points: echarts.graphic.clipPointsByRect(points, {
            x: params.coordSys.x,
            y: params.coordSys.y,
            width: params.coordSys.width,
            height: params.coordSys.height
          })
        },
        style: api.style({
          fill: color,
          stroke: echarts.color.lift(color)
        })
      };
    }

    function prag() {
      option = {
        // backgroundColor: '#404a59',
        title: {
          text: '预警仪器分布图',
          subtext: 'data for natural disaster',
          sublink: '#',
          left: 'center',
          textStyle: {
            color: '#fff'
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: function (params) {
            return getFormatter(params);
          }
          /* {b0}: {c0}地区名字+所有数值 */
        },
        bmap: {
          center: [104.114129, 37.550339],
          /* 设置地图显示的中心 */
          zoom: 5,
          roam: true,
          mapStyle: {
            styleJson: [{ /* 设置水区域的颜色 */
                "featureType": "water",
                "elementType": "all",
                "stylers": {
                  "color": "#044161"
                }
              },
              {
                "featureType": "land",
                "elementType": "all",
                "stylers": {
                  "color": "#004981"
                }
              },
              {
                "featureType": "boundary",
                "elementType": "geometry",
                "stylers": {
                  "color": "#064f85"
                }
              },
              {
                "featureType": "railway",
                "elementType": "all",
                "stylers": {
                  "visibility": "off"
                }
              },
              {
                "featureType": "highway",
                "elementType": "geometry",
                "stylers": {
                  "color": "#004981"
                }
              },
              {
                "featureType": "highway",
                "elementType": "geometry.fill",
                "stylers": {
                  "color": "#005b96",
                  "lightness": 1
                }
              },
              {
                "featureType": "highway",
                "elementType": "labels",
                "stylers": {
                  "visibility": "off"
                }
              },
              {
                "featureType": "arterial",
                "elementType": "geometry",
                "stylers": {
                  "color": "#004981"
                }
              },
              {
                "featureType": "arterial",
                "elementType": "geometry.fill",
                "stylers": {
                  "color": "#00508b"
                }
              },
              {
                "featureType": "poi",
                "elementType": "all",
                "stylers": {
                  "visibility": "off"
                }
              },
              {
                "featureType": "green",
                "elementType": "all",
                "stylers": {
                  "color": "#056197",
                  "visibility": "off"
                }
              },
              {
                "featureType": "subway",
                "elementType": "all",
                "stylers": {
                  "visibility": "off"
                }
              },
              {
                "featureType": "manmade",
                "elementType": "all",
                "stylers": {
                  "visibility": "off"
                }
              },
              {
                "featureType": "local",
                "elementType": "all",
                "stylers": {
                  "visibility": "off"
                }
              },
              {
                "featureType": "arterial",
                "elementType": "labels",
                "stylers": {
                  "visibility": "off"
                }
              },
              {
                "featureType": "boundary",
                "elementType": "geometry.fill",
                "stylers": {
                  "color": "#029fd4"
                }
              },
              {
                "featureType": "building",
                "elementType": "all",
                "stylers": {
                  "color": "#1a5787"
                }
              },
              { /* 设置是否显示所有地区的名字 */
                "featureType": "label",
                "elementType": "all",
                "stylers": {
                  "visibility": "off"
                }
              }
            ]
          }
        },
        series: [{
            name: 'pm2.5',
            type: 'scatter',
            coordinateSystem: 'bmap',
            data: convertData1(),
            symbolSize: function (val) {
              return val[2] / 10;
            },
            label: {
              normal: {
                formatter: '{b}',
                position: 'right',
                show: false
              },
              emphasis: {
                show: true
              }
            },
            itemStyle: {
              normal: {
                color: '#ddb926'
              }
            }
          },
          {
            name: 'Top 5',
            type: 'effectScatter',
            coordinateSystem: 'bmap',
            data: convertData2(),
            symbolSize: function (val) {
              return val[2] / 10;
            },
            showEffectOn: 'emphasis',
            rippleEffect: {
              brushType: 'stroke'
            },
            hoverAnimation: true,
            label: {
              normal: {
                formatter: '{b}',
                position: 'right',
                show: true
              }
            },
            itemStyle: {
              normal: {
                color: '#FF0000',
                shadowBlur: 10,
                shadowColor: '#333'
              }
            },
            zlevel: 1
          } 
        ]
      };
      myChart.setOption(option);
    }

    $.ajax(getting)

    window.setInterval(function () {
      $.ajax(getting)

    }, 1000);
  </script>


</body>

</html>